function DrawBioChart(params)
{

var ul="";

            ul="http://" + location.hostname + "/map/Chart_Data?search=" + params;

    downloadUrl(url = ul, function(returnVal) {
    var plotarea = null;
       if(returnVal != "")
       {

            var rawData = returnVal.split("|");

            if(rawData.length == 5)
            {

                var xaxisList = GetLocationList(rawData[0]);

                // data is in this format:  1,'Fish1',1.00:2,'Fish2',2.00
                // so need to create chart xaxis from it by spliting it in two dimentional array
                var dataList = new Array(0);
                var temp;
                var temp2;
                var fishName = "";
                var fishID = "";
                var arrIndex = 0;
                var arrIndex2 = 0;
                var arrIndex3 = 0;
                var arrIndex4 = 0;
                var tempDataArray = new Array(0);
                var tempDataArray2 = new Array(0);
                var tempDataArray3 = new Array(0);

                var fishDetailList = rawData[1].split(":");

                for(var fishIndex = 0; fishIndex < fishDetailList.length; fishIndex++){

                    temp = fishDetailList[fishIndex].split(",");

                    if((temp[1] !=  fishName || fishName == "") && !containsObj(tempDataArray2, temp[3]))
                    {
                        fishName = temp[1];

                        for(var fishIndex2 = 0; fishIndex2 < fishDetailList.length; fishIndex2++){
                            temp2 = fishDetailList[fishIndex2].split(",");

                            if(temp2[1] == fishName){
                                tempDataArray[arrIndex++] = new Array(temp2[0], parseInt( temp2[2]));
                                tempDataArray3[arrIndex4++] =temp2[0];

                            }
                            else
                            {
                                if(!containsObj(tempDataArray3, temp2[0]) && !LocationToVerify(fishDetailList, fishName, temp2[0], fishIndex2)){
                                        tempDataArray[arrIndex++] = new Array(temp2[0], 0);
                                        tempDataArray3[arrIndex4++] = temp2[0];

                                }
                            }
                        }

                        //alert(fishName + "--> " + tempDataArray);
                        dataList[arrIndex3++] = {label: fishName, data: tempDataArray.sort()};
                        tempDataArray2[arrIndex2++] = temp[3];// fishName ;

                        tempDataArray = new Array(0);    // Clearing array for next data
                        tempDataArray3 = new Array(0);    // Clearing array for next data
                        arrIndex = 0;               // Clearing array index for next data
                        arrIndex4 = 0;
                    }
                }

                // Clear Chart Legend
                //document.getElementById("spUnitList").innerHTML = "";
                //document.getElementById("spYearList").innerHTML = "";
                //document.getElementById("spDepthList").innerHTML = "";

                // Add nodes in Chart Legend (unit)
                //document.getElementById("spUnitList").appendChild(document.createTextNode(rawData[2]));

                // Add nodes in Chart Legend (unit)
                //document.getElementById("spDepthList").appendChild(document.createTextNode(rawData[4]));

//                var yearList = rawData[3].split(",");
//
//                for(var idx = 0; idx < yearList.length; idx++)
//                {
//                    var link = document.createElement ('A');
//                    link.appendChild (document.createTextNode (yearList[idx]));
//                    link.setAttribute ('href', '#');
//                    link.setAttribute ('onclick', "refreshChart('"+ yearList[idx] +"');");
//
//                    // Add nodes in Chart Legend (Year)
//                    document.getElementById("spYearList").appendChild(link);
//                }

                var options = {
                             series: {
                                 stack: true,
                                 lines: {
                                     show: false,
                                     steps: false
                                 },
                                 bars: {
                                     show: true,
                                     lineWidth: 2, // in pixels
                                     barWidth: 0.6,
                                     align: 'center',
//                                     fill: true,
//                                     fillColor: null,
                                     horizontal: false // when horizontal, left is now top

                             },
                                 shadowSize: 3
                             },
                             grid: {
                backgroundColor: {colors: ["#fff", "#eee"]},
                canvasText: {show: true, font: "sans 8px"},
                labelMargin: 10
                                },

                             legend: {
                                 show: true,
                                 noColumns: 3,
//                                 labelFormatter: null, // fn: string -> string
//                               labelWidth: 30,
//                                 labelBoxBorderColor: "#ccc", // border color for the little label boxes
                                 position: "ne",
                                 container:document.getElementById("spFishList"),
                                 backgroundColor: null, // null means auto-detect
                                 backgroundOpacity: 0.85 // set to 0 to avoid background
                             },
                             selection: {mode: "x"},
//                             color: "rgb(30, 180, 20)",
                           xaxis: {ticks: xaxisList, autoscaleMargin: null},
                           yaxis: {labelWidth:25}

                    };


                //document.getElementById("reportarea").style.width = 100 + "%";
                plotarea = $("#canvas_bioreport");

                $.plot( plotarea , dataList,options);

                // Hide No Data Available Message

                //document.getElementById("hide_data").style.display = "none";
                document.getElementById("spFishList").style.display = "block";
            }
        }
        else
        {
            var options_blank = {
                         series: {
                             stack: 0,
                             lines: {
                                 show: false,
                                 steps: false
                             },
                             bars: {
                                 show: true,
                                 lineWidth: 2, // in pixels
                                 barWidth: 0.6,
                                 align: 'left',
                                 fill: true,
                                 fillColor: null,
                                 horizontal: false // when horizontal, left is now top
                             },
                             shadowSize: 3
                         },
                         legend: {
                             show: true,
                             noColumns: 10000,
                             labelFormatter: null, // fn: string -> string
                             labelWidth: 30,
                             labelBoxBorderColor: "#ccc", // border color for the little label boxes
                             position: "ne",
                             margin: 5,
                             container: null,
                             backgroundColor: null, // null means auto-detect
                             backgroundOpacity: 0.85 // set to 0 to avoid background
                         },
                         selection: {mode: "x"},
                         color: "rgb(30, 180, 20)",
                         xaxis: {ticks: 0, autoscaleMargin: null},
                         grid: {hoverable: true, autoHighlight: true, aboveData: true},
                         zoom: {interactive: true},
                         pan: {interactive: true},
                         yaxis: {min: 0, tickDecimals: 0, overflow: scroll}
                };

                plotarea = $("#canvas_bioreport");
                $.plot( plotarea , new Array(0,0), options_blank );


                document.getElementById("canvas_bioreport").innerHTML = "No Data Found";
//                alert('a');
                document.getElementById("spFishList").style.display = "none";


        }
    });
}
function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request.responseText, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}
function GetLocationList(data)
{
    // data is in this format:  1,'TD1':2,'TD2'
    // so need to create chart xaxis from it by spliting it in two dimentional array
    var xaxisList = new Array(0);
    var temp;
    var index = 0;

    // JQuery Foreach loop
    $.each(data.split(":"), function() {
        temp = this.split(",");
        xaxisList[index++] = new Array(temp[0],temp[1]);
        
    });var xaxisList1 = new Array(0);
    var ind=0;
    var inc=1;
    inc=(xaxisList.length*10)/100;
    inc=Math.round(inc);alert(inc);
    for (a=0; a<=xaxisList.length;a+=inc)
        {
            if (xaxisList[a]!=undefined){xaxisList1[ind++]=xaxisList[a];}
        }
    return xaxisList1;
}
function containsObj(arr, obj) {
  var i = arr.length;
  while (i--) {
    if (arr[i] === obj) {
      return true;
    }
  }
  return false;
}